<script setup lang="ts">
import { watch, ref } from "vue";
import leftCompWrapper from "../common/leftCompWrapper.vue";
import ReTextTooltip from "../../../components/ReTextTooltip";
import { convertStringToNumber, isNotNumberOrShortBar } from "@visual/utils";

defineOptions({
  name: "ListProgress"
});
const isCollapsed = ref(false);
const props = withDefaults(
  defineProps<{
    propValue?: {
      contentList: Array<any>;
      title?: string;
      collapsed?: boolean;
      iconName?: string;
      size?: string;
      isWeeping?: boolean;
      thresholdVlaue?: Number;
    };
  }>(),
  {
    propValue: () => ({
      contentList: [],
      title: "",
      collapsed: false,
      iconName: "alert",
      size: "normal",
      isWeeping: false,
      thresholdVlaue: 80
    })
  }
);
function getMaxValueByKey(arr, key) {
  // 过滤掉 key 不存在或 key 对应值为 null 或 undefined 的对象
  const filteredArr = arr.filter(item => item.hasOwnProperty(key) && item[key] !== null && item[key] !== undefined);

  // 如果过滤后数组为空，返回 null 或其他默认值
  if (filteredArr.length === 0) {
    return 0;
  }

  // 使用 reduce 方法找到最大值
  return filteredArr.reduce((max, item) => {
    const value = item[key];
    // 如果值为字符串，尝试将其转换为数字进行比较
    const numValue = parseFloat(value);
    if (!isNaN(numValue)) {
      return numValue > max ? numValue : max;
    } else {
      // 如果值不能转换为数字，按字符串字典序比较
      return value > max ? value : max;
    }
  }, -Infinity);
}
let max = null;
function dealValue(item) {
  if (!item) return 0;
  const { total, value, unit } = item;
  if (unit && unit !== "%") {
    if (max == null) {
      max = getMaxValueByKey(props?.propValue.contentList, "value");
    }
    if (value == max) return 100;
    if (value < max) return (value / max) * 100;
  }
  try {
    if (total) {
      return convertStringToNumber((value / total) * 100);
    }
    return convertStringToNumber(value);
  } catch (e) {
    console.error(e);
    return value;
  }
}
</script>

<template>
  <leftCompWrapper v-model="isCollapsed" :title="propValue.title" :icon-name="propValue.iconName" :has-collapsed="propValue.collapsed">
    <div v-if="isCollapsed || !propValue.collapsed" class="list-warpper">
      <div v-for="(item, index) in props?.propValue.contentList" :key="item.tagNum ? item.tagNum : index" class="progress-item">
        <div class="progress-title w-[100%]">
          <ReTextTooltip :content="item.title" />
        </div>
        <template v-if="!isNotNumberOrShortBar(item.value)">
          <px-progress
            class="progress-self"
            :text-inside="true"
            :stroke-width="20"
            :percentage="item.value == '--' ? 0 : convertStringToNumber(dealValue(item)) > 100 ? 100 : convertStringToNumber(dealValue(item))"
            :status="dealValue(item) > props.propValue.thresholdVlaue && props.propValue.isWeeping ? 'exception' : ''"
          >
            <template #default="{ percentage }">
              <span v-if="!item.unit" class="percentage-value">{{ percentage }}%</span>
              <span v-else-if="item.value === '--'" class="percentage-value">--</span>
              <span v-else :class="{ 'ml-[35px]': convertStringToNumber(dealValue(item)) < 5 }">{{
                `${convertStringToNumber(item.value)} ${item.unit}`
              }}</span>
            </template>
          </px-progress>
          <div v-if="item.total && !props.propValue.isWeeping" class="w-[30px]">{{ item.value }}/{{ item.total }}</div>
        </template>
        <template v-else>
          <px-tag class="min-w-[50px]" effect="dark" round>
            {{ item.value }}
          </px-tag>
        </template>
      </div>
    </div>
  </leftCompWrapper>
</template>

<style lang="scss" scoped>
.list-warpper {
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between;
  width: 100%;

  .progress-item + .progress-item {
    margin-top: 16px;
  }

  .progress-item {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 41px;
    margin-top: 6px;
    font-size: 14px;

    .progress-self {
      flex-grow: 0;
      width: 85%;
      padding-right: 12px;

      :deep(.px-progress-bar__outer) {
        border-radius: 5px;
      }

      :deep(.px-progress-bar__inner) {
        border-radius: 0;
      }
    }
  }
}
</style>
